<template>
  <div class="LoginPage">
      <!-- 头部 -->
      <div class="loginHeader">
        <p @click="returGo">X</p>
        <p>登录</p>
      </div>
      <!-- 账号输入 -->
      <div class="loginAcount">
        <div class="loginSign">
          <p>ju&nbsp;&nbsp;dou</p>
          <p>句读</p>
        </div>
        <div class="loginNumber">
          <input type="text" placeholder="手机号码">
          <br>
          <input type="text" placeholder="登录密码">
          <br>
          <input type="text" placeholder="登录" @click="btn" class="loginBtn">
          <br>
          <div class="loginWay"> 
            <p>快速注册</p>
            <p>忘记密码</p>
          </div>
        </div>
      </div>

      <!-- 其他登录方式 -->
      <div class="otherLoginWay">
        <fieldset>
          <legend>更多登录方式</legend>
        </fieldset>
        <div class="aaa">
          <div>
            <p class="fa fa-weixin"></p>
            <p>微信</p>
          </div>
          <div>
            <p class="fa fa-qq"></p>
            <p>QQ</p>
          </div>
          <div>
            <p class="fa fa-weibo"></p>
            <p>微博</p>
          </div>
          
        </div>
        
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
     
    }
  },
  methods: {
    returGo:function(){
      // console.log('asdnkjassndkjs')
      this.$router.push("./me")
    },
    btn:function(){
      console.log('enowejowjroie')
    }
  },
}
</script>
<style scoped>
.LoginPage{
  width: 99vw;
  /* border: 1px solid black; */
}
  .loginHeader{
    width: 90vw;
    height: 15vw;
    /* border: 1px solid black; */
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
  }
  .loginHeader p{
    margin-top: 5vw;
  }
  .loginAcount{
    width: 90vw;
    height: 80vw;
    /* border: 1px solid blue; */
    text-align: center;
    margin: 15vw auto;

  }
  .loginSign{
    /* border: 1px solid rebeccapurple; */
    padding: 5vw;
  }
  .loginSign p:nth-child(1){
    font-size: 2vw;
  }
  .loginSign p:nth-child(2){
    font-size: 6vw;
    letter-spacing: 2vw;
  }
  .loginNumber{
    width: 90vw;
    line-height: 15vw;

  }
  .loginNumber input{
    width: 80%;
    height: 10vw;
    border: none;
    border-bottom: 1px solid rgb(245, 241, 241);
    font-size: 4vw;
    color: rgb(14, 14, 14);

  }
  .loginBtn{
    background-color: rgba(22, 21, 21, 0.822);
    text-align: center;
    border-radius: 2vw;
  }
  .loginWay{
    width: 80%;
    margin: 0 auto;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    font-size: 3vw;
  }
  .loginWay p{
    height: 10vw;
    margin-top: -3vw;
  }
  .otherLoginWay{
    width: 90vw;
    height: 25vw;
    margin: 0 auto;
    padding: 3vw;
  }
  fieldset{
    width: 90%;
    text-align:center;
    border: none;
    border-top: 1px solid rgb(240, 240, 240);
    font-size: 3.5vw;
    color: rgb(184, 184, 170);
  }
  .aaa{
    margin: 0 auto;
    width: 90%;
    height: 10vw;
    display: flex;
    justify-content:space-around;
    line-height: 7vw;
  }
  .aaa p:nth-child(2){
    font-size: 3.5vw;
    margin-left: -1vw;
  }
</style>
